<!--折线图堆叠-->
<template>
    <div id="main" style="margin: 10px auto;width: 800px;height: 800px;"></div>
</template>
<script>
    import request from "../utils/request";
    //
    const echarts = require('echarts');
    //
    export default {
        name: "CitySalary",
        data () {
            return {
                city:[],
                avgSalary:[],
                minSalary:[],
                median:[],
                maxSalary:[],
                recruitNum:[],
                array1:[],
                // array2:[],
                // array3:[],
                // array4:[],
                // array5:[]
            }
        },
        mounted(){
            this.initChart();
        },
        methods: {
            initChart(){
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                request.get("/citySalary",{
                    params: {
                        pageNum: this.currentPage,
                        pageSize:this.pageSize,
                        search: this.search
                    }
                }).then(res=> {
                    // this.data2 = [];
                    for (let i = 0; i < 7; i++) {
                        this.city.push(res.data.records[i]['city']);
                        this.avgSalary[i]=Number(res.data.records[i].avgSalary);
                        this.minSalary[i]=Number(res.data.records[i].minSalary);
                        this.median[i]=Number(res.data.records[i].median);
                        this.maxSalary[i]=Number(res.data.records[i].maxSalary);
                        this.recruitNum[i]=Number(res.data.records[i].recruitNum);
                        console.log(this.city[i])
                        this.array1[i]=[this.avgSalary[i],this.minSalary[i],this.median[i],this.maxSalary[i],this.recruitNum[i]]
                    }

                    option = {
                        title: {
                            text: '城市工资对比',
                            subtext: '数据来自网络'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        toolbox: {  // 显示保存图片的按钮
                            show: true,
                            orient: 'horizontal',
                            top: 10,
                            right: 20,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            data: this.city
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['平均工资', '最低工资','工资中位数','最高工资','招聘人数']
                        },
                        series: [
                            {
                                name: '北京',
                                type: 'bar',
                                data: this.array1[0]
                            },
                            {
                                name: '深圳',
                                type: 'bar',
                                data: this.array1[1]
                            },
                            {
                                name: '上海',
                                type: 'bar',
                                data: this.array1[2]
                            },
                            {
                                name: '杭州',
                                type: 'bar',
                                data: this.array1[3]
                            },
                            {
                                name: '南京',
                                type: 'bar',
                                data: this.array1[4]
                            },
                            {
                                name: '广州',
                                type: 'bar',
                                data: this.array1[5]
                            },
                            {
                                name: '东莞',
                                type: 'bar',
                                data: this.array1[6]
                            },
                        ]
                    };

                    option && myChart.setOption(option);
                })

            },
        }
    }
</script>

<style scoped>

</style>